<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- <el-container justify="center" > -->

  <div class="table-container">
    <!-- <el-table :data="agentsList">
          <el-table-column width="180">
            <template>
              <i class="el-icon-time"></i>
            </template>
          </el-table-column>
        </el-table> -->
    <!-- <el-card class="box-card"></el-card> -->
    <div class="header">
      <img src="@/assets/components/芜湖.png" alt="" />
      <span>房产经纪</span>
    </div>
    <div class="content">
      <ul v-for="v in agentsList" :key="v.name">
        <li @click="getPropertyList(v.id)" >
          <div class="img">
            <img
              src=""
              alt=""
              v-imgErr="require('@/assets/components/1.png')"
            />
          </div>
          <div class="details">
            <h3>
              {{ v.name }}
            </h3>
            <p>
              {{ v.desc }}
            </p>
          </div>
        </li>
      </ul>
    </div>
    <property :showingProperty.sync="showingProperty" :tagId="tagId" ref="property"></property>
  </div>
  <!-- </el-container> -->
</template>

<script>
import { getAgentsList, getAgentsListTotal } from '@/api/agents'
import { getPropertyList } from '@/api/property'
import Property from '@/components/property.vue'
export default {
  data () {
    return {
      agentsList: [],
      searchQuary: {
        _limit: 2,
        _start: 0,
        nameContains: ''
      },
      total: 0,
      showingProperty: false,
      tagId: 0
    }
  },
  components: {
    Property
  },
  created () {
    this.getAgentsList(this.searchQuary)
  },
  methods: {
    async getAgentsList (quary) {
      const res = await getAgentsList(quary)
      this.agentsList = res.data
      const val = await getAgentsListTotal(quary.nameContains)
      this.total = val.data
      // console.log(this.total)
    },
    async getPropertyList (id) {
      const res = await getPropertyList({
        _limit: 2,
        _start: 0,
        agent: id
      })
      this.$refs.property.propertyList = res.data
      console.log('propertyList', res)
      // this.tagId = id
      this.showingProperty = true
    }
  }
}
</script>

<style scoped lang="scss">
* {
  // margin: 0;
  // padding: 0;
  box-sizing: border-box;
}
.table-container {
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: center;
  width: 62.5vw;
  .header {
    margin-top: 30px;
    display: flex;
    // height: 24px;
    img {
      display: inline-block;
      height: 24px;
    }
    span {
      font-size: 24px;
      line-height:24px;
      color: #f8ac3b;
      font-weight: 700;
    }
  }
  .content {
    margin: 30px 0;
    ul {
      padding: 0;
      list-style: none;
      border: 1px solid #ece9ed;
      width: 62.5vw;
      // margin: 20px 0 ;
      padding: 0 20px;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 250px;
          width: 400px;
          padding-right: 20px;
          border-right: 1px solid #ece9ed;
          img {
            // width: 240px;
            width: 100%;
            // object-fit: contain;
          }
        }
        .details {
          display: flex;
          flex-direction: column;
          justify-content: center;
          line-height: 24px;
          border-left: 1px solid #ece9ed;
          width: 100%;
          h3 {
            margin: 8px 0;
          }
          p {
            margin: 8px 0;
          }
        }
      }
    }
  }
}
// .el-table {
//   width: 1000px;
// }
// .el-card {
//   width: 1000px;
// }
</style>
